
<template>
<h1>区块链节点管理</h1>
  <div class="table-container">
  <a-table
      :columns="columns"
      :dataSource="data"
      :pagination="pagination"
      :row-class-name="(_record, index) => index % 2 === 0 ? 'table-row-light' : 'table-row-dark' "
  >
    <template #bodyCell="{column, record}">
      <template v-if="column.title === '操作' " >
        <div class="actionButtons">
          <a-button>重置系统</a-button>
          <a-button>停止系统</a-button>
          <a-button>启动系统</a-button>
        </div>
      </template>
    </template>
  </a-table>
  </div>
</template>

<script>
import axiosInstance from "@/axios/axios.js";

export default {
  name: "BlockChainNodeManage",
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      columns: [
        {
          title: 'Index',
          dataIndex: 'index',
        },
        {
          title: '节点IP',
          dataIndex: 'IP',
        },
        {
          title: '活跃状态',
          dataIndex: 'activeState',
        },
        {
          title: '操作',
        },
      ],
      data: [
        {
          index: '1',
          IP:"192.168.1.1",
          activeState:"已启动"
        },
        {
          index: '1',
          IP:"192.168.1.1",
          activeState:"已启动"
        },
      ],
    }
  },
  methods:{
    getBlockChainNodeInfo(){
      axiosInstance({
        method: "GET",
        url: "select6",
        params:{
          table_name: 'yourStateUploadValue',
        }
      })
          .then(response => {
            console.log(response);
            if (typeof(response) ==='string'){
              //处理图片
            }
          })
          .catch(error => {
            console.error(error);
            // Handle the error here
          });
    },
  },
  computed: {
    //当页面实际数据数量小于页面pageSize时，填充空白数据
    pagination() {
      return {
        current: this.pageNum,
        pageSize: this.pageSize,
        total: this.data.length,
        showTotal: total => `共 ${total} 条`,
        onChange: this.handlePageChange
      }
    }
  },
}
</script>


<style scoped>
.table-container {
  margin: 20px; /* 页面边缘的距离 */
  max-width: 1200px; /* 表格的最大宽度 */
  width: 100%; /* 表格宽度，也可以是固定的像素值 */
}
.actionButtons{
  display: flex;
  justify-content: left;
  gap: 20px;
}
:deep(.table-row-light) {
  background-color: #ffffff; /* 浅色行的颜色 */
}

:deep(.table-row-dark) {
  background-color: #f1f1f1; /* 深色行的颜色 */
}
</style>